<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2018/5/10
  Time: 12:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
</head>
<body>
 用户名：
 <input type="text" name="username" id="username" value=""> <br>
 密码:
 <input type="password" name="pass" id="pass" value="">
 <br>
 <input type="button" value="登录" id="btn">


 <hr>
 <input type="button" value="post登录" id="btnpost">
</body>
<%--
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
--%>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            alert("aaa");
            var username = $("#username").val();
            var pass = $("#pass").val();
            $.ajax({
                  url:"${pageContext.request.contextPath}/jsonLogin.do",
                  type:"post",
                  contentType:"application/json;charset=utf-8",
                /* 只当普通的字符串处理
                data:{username:username,pass:pass},
                JSON.stringify():方法是将字符串转成json字符串
                */
                  data:JSON.stringify({username:username,pass:pass}),
                  dataType:"json",
                  success:function (data) {
                      if (data.success){
                          alert("ok");
                      }else {
                          alert("error");
                      }
                  }
                }

            )
        });

        /*以下使用ajax的普通的post方法处理*/
  $("#btnpost").click(function () {
      alert("bb");
      var url = "${pageContext.request.contextPath}/postLogin.do";
      var username = $("#username").val();
      var pass = $("#pass").val();
      $.post(url,{username:username,pass:pass},function (data) {
          if (data.success){
              alert("ok..." +data.user.username);
          }else {
              alert("false..."+data);
          }
      })
  })

    })
</script>
</html>
